import 'package:flutter/material.dart';

class Demo6 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new Demo6State();
  }
}

class Demo6State extends State<Demo6> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('可滚动Widget'),
      ),
      body: new Scrollbar(
        child: new ListView(
          padding: EdgeInsets.all(20.0),
          children: [1,2,3,4,5,6,7,8,9].map((i) {
            if(i == 1){
              return new Container(
                padding: EdgeInsets.all(16.0),
                child: new Text('整个页面纵向滚动，蓝色方块内元素横向滚动'),
              );
            }
            return new Container(
              margin: EdgeInsets.only(top: 30.0),
              color: Colors.blue,
              width: 100.0,
              height: 100.0,
              // child: new Scrollbar(
              //   child: new ListView(
              //     padding: EdgeInsets.all(16.0),
              //     scrollDirection: Axis.horizontal,
              //     children: [1,2,3,4,5,6].map((i) {
              //       return new Container(
              //         margin: EdgeInsets.only(left: i > 1 ? 16.0 : 0.0),
              //         width: 300.0,
              //         height: 30.0,
              //         color: Colors.red,
              //         child: new Text(i.toString()),
              //       );
              //     }).toList(),
              //   ),
              // ),
              child: SingleChildScrollView(// SingleChildScrollView包裹Wrap后，Wrap内元素并不换行，而是超出屏幕宽度的部分可以横向滚动
                padding: EdgeInsets.all(16.0),
                scrollDirection: Axis.horizontal,
                child: new Wrap(
                  spacing: 16.0,
                  children: [1,2,3,4,5,6].map((i) {
                    return new Container(
                      width: 300.0,
                      height: 30.0,
                      color: Colors.red,
                      child: new Text(i.toString()),
                    );
                  }).toList(),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}